<template>
  <div class="main">
    <div class="inputs">
      <el-form ref="Form" label-width="110px">
        <div class="row">
          <el-form-item label="取件任务编号:">
            <el-input v-model="form.task" style="width: 350px;" placeholder="请输入取件任务编号" />
          </el-form-item>
          <el-form-item label="订单编号:">
            <el-input v-model="form.ptask" style="width: 350px;" placeholder="请输入订单编号" />
          </el-form-item>
          <el-form-item label="所属营业厅:">
            <!-- <el-input style="width: 350px;" /> -->
            <!-- 下拉 树形图 关键select需要option 关键思路隐藏 option 直接显示自适应树状结构   -->
            <el-select ref="selectTree" v-model="selectValue" class="main-select-tree select" style="width: 350px;" placeholder="请选择所属营业厅">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value" style="display: none;" />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="row">
          <el-form-item label="预计完成时间:">
            <el-date-picker
              v-model="form.startTime"
              prefix-icon="el-icon-timer"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="实际完成时间:">
            <el-date-picker
              v-model="form.eddTime"
              prefix-icon="el-icon-timer"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="任务分配状态:">
            <el-select v-model="form.car" placeholder="请选择任务分配状态" style="width: 350px;">
              <el-option
                v-for="item in carOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="btn">
          <el-button type="danger" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </el-form>
    </div>
    <ul class="tab">
      <li :class="{active:activeTab===0}" @click="tabSearch(0)">全部</li>
      <li :class="{active:activeTab===1}" @click="tabSearch(1)">新任务</li>
      <li :class="{active:activeTab===2}" @click="tabSearch(2)">已完成</li>
      <li :class="{active:activeTab===3}" @click="tabSearch(3)">已取消</li>
    </ul>
    <div class="table">
      <el-button type="danger" style="margin: 5px 0 25px;" @click="$message.error('请选择要分配的作业！')">人工分配</el-button>
      <div class="bader">
        <el-table :header-cell-style="{background:'#f8faff'}" :data="tableData" stripe>
          <el-table-column type="selection" width="55">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked" :disabled="true" />
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="60"
            :index="index"
          />
          <el-table-column
            label="取件作业编号"
            prop="id"
          />
          <el-table-column
            label="所在营业厅"
            prop="agencyName"
          />
          <el-table-column
            label="任务分配状态"
          >
            <template v-slot="{row}">
              <span v-if="row.assignedStatus===2" class="dotGreen">已分配</span>
              <span v-else class="dot">待人工分配</span>
            </template>
          </el-table-column>
          <el-table-column
            label="快递员姓名"
            prop="courierName"
          />
          <el-table-column
            label="订单编号"
            prop="orderId"
          />
          <el-table-column
            label="预计开始时间"
            prop="estimatedStartTime"
          />
          <el-table-column
            label="预计完成时间"
            prop="estimatedEndTime"
          />
          <el-table-column
            label="实际完成时间"
            prop="actualEndTime"
          />
          <template #empty>
            <div>
              <img class="nullImg" :src="imgUrl" alt="">
              <span class="nullText">{{ isSearch?'这里空空如也':'没有找到您要的内容哦~' }}</span>
            </div>
          </template>
        </el-table>
      </div>
      <div v-if="total" class="page">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

  </div>
</template>

<script>
import { getTree } from '@/api/selectTree'
import { fetchList } from '@/api/ptask'
export default {
  data() {
    return {

      total: 1,
      tableData: [],
      pageParams: {
        // agencyId: '',
        // assignedStatus: '',
        // id: '',
        // maxActualEndTime: '',
        // maxEstimatedEndTime: '',
        // minActualEndTime: '',
        // minEstimatedEndTime: '',
        // orderId: '',
        page: 1,
        pageSize: 10,
        // status: '',
        taskType: '1'
      },
      activeTab: 0,
      value: 11,
      value1: 11,
      form: {
        car: '',
        task: '',
        ptask: '',
        startTime: [],
        eddTime: []
      },
      destination: '',
      selectValue: '',
      treeData: [],
      imgUrl: 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png',
      isSearch: true,
      carOptions: [
        { label: '已分配', value: '2' },
        { label: '待人工分配', value: '3' }
      ],
      serviceId: ''
    }
  },
  computed: {
    index() {
      return this.pageParams.page * this.pageParams.pageSize - this.pageParams.pageSize + 1
    }
  },
  async created() {
    const { data } = await getTree()
    this.treeData = JSON.parse(data)
    const res = await fetchList({ page: 1, pageSize: 10, taskType: 1 })
    console.log(res)
    this.total = +res.data.counts
    this.tableData = res.data.items
  },
  methods: {
    tabSearch(id) {
      this.activeTab = id
      this.pageParams.page = 1
      if (id) {
        this.pageParams.status = id
      } else {
        delete this.pageParams.status
      }
      this.getList()
    },
    async search() {
      if (this.form.task) { this.pageParams.id = this.form.task }
      if (this.form.ptask) { this.pageParams.orderId = this.form.ptask }
      if (this.serviceId) { this.pageParams.agencyId = this.serviceId }
      if (this.form.startTime.length !== 0) { this.pageParams.minEstimatedEndTime = this.form.startTime[0]; this.pageParams.maxEstimatedEndTime = this.form.startTime[1] }
      if (this.form.eddTime.length !== 0) { this.pageParams.minActualEndTime = this.form.eddTime[0]; this.pageParams.maxActualEndTime = this.form.eddTime[1] }
      if (this.form.car) { this.pageParams.assignedStatus = this.form.car }
      this.getList()
      setTimeout(() => {
        if (!this.tableData.id) {
          this.isSearch = false
          this.imgUrl = 'https://slwl-admin.itheima.net/static/img/icon-empty.3abd3b9a.png'
        }
      }, 0)
    },
    close() {
      delete this.pageParams.agencyId
      delete this.pageParams.assignedStatus
      delete this.pageParams.id
      delete this.pageParams.maxActualEndTime
      delete this.pageParams.maxEstimatedEndTime
      delete this.pageParams.minActualEndTime
      delete this.pageParams.minEstimatedEndTime
      delete this.pageParams.orderId
    },
    reset() {
      this.isSearch = true
      this.imgUrl = 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png'
      this.form.car = ''
      this.form.task = ''
      this.form.ptask = ''
      this.form.startTime = []
      this.form.eddTime = []
      this.selectValue = ''
      this.serviceId = ''
      this.close()
      this.getList()
    },
    hasValue(row) {
      // this.courier.agentId = row.id
      console.log(row.id)
      this.serviceId = row.id
      this.selectValue = row.name
      this.$refs.selectTree.blur()
    },
    hasValue1(row) {
      // this.courier.agentId = row.id
      console.log(row.name)
      this.destination = row.name
      this.$refs.destination.blur()
    },
    async getList() {
      const res = await fetchList(this.pageParams)
      console.log(res)
      this.total = +res.data.counts
      // this.pageParams.pageSize = res.data.pageSize
      this.tableData = res.data.items
    },
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val
      this.getList()
    }

  }

}
</script>

<style scoped lang="scss">
.inputs{
    border-radius: 10px;
    background-color: #fff;
    padding:20px 40px 20px 30px;

}
.table{
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
.row{
  display: flex;
  justify-content: space-between;
}
.btn{
  /* width: 460px; */
}
.bader{
  border: 1px solid #eef0f6;

}
.nullImg{
  margin-top: 20px;
    width: 25%;
    height: 25%;
}
.nullText{
  display: block;
  margin-bottom: 25px;
}
.tab{
  list-style: none;
  height: 50px;
  background-color: #fff;
  display: flex;
  padding: 0;
}
.tab li{
  line-height: 50px;
  text-align: center;
  width: 100px;
  height: 100%;
}
 .active{
  background-color: #ffeeeb;
  color: #e15536;
}
.page{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.dot{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color:#e15536 ;
    }
  }
  .dotGreen{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #1dc779;
    }
  }
</style>
